<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main,
        table {
            width: 800px;
            margin: 0 auto;
        }

        .main {
            height: 40px;
            line-height: 40px;
        }

        table,
        th,
        td {
            border: 2px solid black;
            border-collapse: collapse;
        }

        .optd {
            width: 200px;
        }

        input {
            font-size: 14px;
            height: 20px;
            border-radius: 2px;
            border: 1px solid;
            margin: 2px;
        }

        .addTable {
            padding: 10px;
            position: fixed;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            background: rgba(21, 20, 20, 0.2);
            display: none;
        }

        .addTable table {
            text-align: center;
            margin-bottom: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            transform: translate(-50%, -50%);
        }

        .confirm {
            position: absolute;
            top: 60%;
            left: 50%;
            width: 800px;
            transform: translateX(-50%);
            text-align: center;
            height: 40px;
            line-height: 40px;
        }

        .confirm input {
            height: 40px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="main">
        <input type="button" value="新增一行" id="add" />
    </div>
    <table id="table">

    </table>
    <div class="addTable" id="addRow">
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td><input type="text" id="number" /></td>
                <td><input type="text" id="name" /></td>
                <td>
                    <select id="gender">
                        <option>男</option>
                        <option>女</option>
                    </select>
                </td>
                <td><input type="text" id="age" /></td>
            </tr>
        </table>
        <div class="confirm">
            <input type="button" value="确定" id="sure" />
            <input type="button" value="取消" id="cancle" />
        </div>
    </div>
</body>

</html>
<script>
    function $id(id) {
        return document.getElementById(id);
    }
    // 兼容
    function setInnerText(element, text) {
        if (element.innerText !== undefined) {
            element.innerText = text;
        } else {
            element.textContent = text;
        }
    }

    function getInnerText(element) {
        if (element.innerText !== undefined) {
            return element.innerText;
        } else {
            return element.textContent;
        }
    }
    //data
    var head = ["学号", "姓名", "性别", "年龄", "操作"];
    var data = [{
            "number": "001",
            "name": "张三",
            "gender": "男",
            "age": 16
        },
        {
            "number": "002",
            "name": "王五",
            "gender": "女",
            "age": 17
        },
        {
            "number": "003",
            "name": "李葫芦",
            "gender": "男",
            "age": 15
        },
        {
            "number": "004",
            "name": "小明",
            "gender": "男",
            "age": 18
        },
        {
            "number": "005",
            "name": "小红",
            "gender": "女",
            "age": 16
        }
    ];
    //结构
    var table = $id("table");
    var headtr = document.createElement("tr");
    table.appendChild(headtr);
    for (var i = 0; i < head.length; i++) {
        var th = document.createElement("th");
        setInnerText(th, head[i]);
        headtr.appendChild(th);
    }
    for (var i = 0; i < data.length; i++) {
        var tr = createRow(data[i]);
        table.appendChild(tr);
    }
    //向上按钮
    function moveUp() {
        var tr = this.parentNode.parentNode;
        var previous = tr.previousElementSibling;
        if (previous.previousElementSibling) {
            table.insertBefore(tr, previous);
        } else {
            alert("已经是第一行了");
        }
    }
    //向下按钮
    function moveDown() {
        var tr = this.parentNode.parentNode;
        var next = tr.nextElementSibling;
        if (next) {
            if (next.nextElementSibling) {
                table.insertBefore(tr, next.nextElementSibling);
            } else {
                table.appendChild(tr);
            }
        } else {
            alert("已经是最后一行了！！")
        }

    }
    //删除按钮
    function deleteRow() {
        var res = confirm("确定要删除？");
        if (res) {
            var tr = this.parentNode.parentNode;
            table.removeChild(tr);
        }
    }
    $id("add").onclick = function () {
        $id("addRow").style.display = "block";
    }

    $id("sure").onclick = function () {
        var number = $id("number").value;
        var name = $id("name").value;
        var opts = $id("gender").getElementsByTagName("option");
        var gender;
        for (var i = 0; i < opts.length; i++) {
            if (opts[i].selected) {
                gender = getInnerText(opts[i]);
                break;
            }
        }
        //二级结构渲染
        var age = $id("age").value;

        var obj = {
            number: number,
            name: name,
            gender: gender,
            age: age
        };
        var tr = createRow(obj);
        table.appendChild(tr);
        $id("addRow").style.display = "none";
        }
    function createRow(obj) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var key in obj) {
            var td = document.createElement("td");
            setInnerText(td, obj[key]);
            tr.appendChild(td);
        }
        var optd = document.createElement("td");
        optd.className = "optd";
        var up = document.createElement("input");
        up.type = "button";
        up.value = "向上移动";
        up.onclick = moveUp;
        optd.appendChild(up);
        var down = document.createElement("input");
        down.type = "button";
        down.value = "向下移动";
        down.onclick = moveDown;
        optd.appendChild(down);
        var del = document.createElement("input");
        del.type = "button";
        del.value = "删除";
        del.onclick = deleteRow;
        optd.appendChild(del);
        tr.appendChild(optd);
        return tr;
    }
    $id("cancle").onclick = function () {
        $id("addRow").style.display = "none";
    }
</script>